Gruppieren: Tabs
Letztes Update:
21. September 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Elemente wie Tabs oder Accordeons reduzieren die Komplexität von Inhalten. Sie unterteilen umfangreichere Inhalte in Sinnabschnitte, geben den Seiten/Inhalten Struktur, helfen umfangreiche Inhalte gut strukturiert und auf überschaubarem Platz unterzubringen. Sie reduzieren die Komplexität von Inhalten, unterteilen umfangreichere Inhalte in Sinnabschnitte, geben den Seiten/Inhalten Struktur, verringern die initial angezeigte Inhaltsmenge und verbessern die Übersichtlichkeit. Nutzer können die Sinnabschnitte besser erfassen und weitere für sie interessante Inhalte auswählen bzw. per Interaktion anzeigen lassen.
Wann kommt dieses Element zum Einsatz?
Zur Strukturierung bzw. Verbesserung der Übersichtlichkeit/Wahrnehmbarkeit umfangreicher aber relevanter Inhalte.
Tab-Navigationen kommen für hierarchisch höherstehende Informationen zum Einsatz.
Akkordeons werden für hierarchisch tiefer einzustufende Inhalte verwendet – oder wenn die Sinnabschnitte eine gewisse Anzahl übersteigt wie beispielsweise auf FAQ Seiten.
Tab-Navigationen sind nicht als alternative zu Fortschrittsbalken geeinget und dürfen nur zur Strukturierung von Inhalten verwendet werden, welche keinen definierten Ablauf durch den Nutzer erfordern.
Akkordeonmenüs können – sofern für eine Marke ausdrücklich definiert – als Alternative zu Fortschrittsbalken zum Einsatz kommen.
Tabs und Accordeons können auch ineinander verschachtelt werden – beispielsweise ein Akkordeon innerhalb einer Tab-Navigation.
Tabs innerhalb von Tabs sind grundsätzlich möglich, erfordern jedoch eine abweichende optische Darstellung, welche aktuell nicht definiert ist.
UX Konzeption
- Initial ist immer der erste Reiter aktiv. Das ist jener, mit den häufigst genutzten Infos.
- Es sollten nicht mehr als maximal 7 Reiter verwendet werden. Besser jedoch so wenig wie möglich.
- Reiter-Beschriftungen müssen so kurz wie möglich sein – keine zweizeiligen Beschriftungen verwenden!
- Einzelne Reiter werden nicht verwendet.
- Tabs werden nicht als Ersatz für eine Fortschrittsanzeige verwendet.
- Reiter öffnen sich, sobald sie den Fokus erhalten – zusätzliches Drücken von Space oder Ender ist nicht erforderlich. das erste fokussierbare Element erhält den Fokus- wichtig für die Barrierefreiheit.
Tabs sind im HTML als Listen <ul> ausgezeichnet. Für Barrierefreiheit erhält das <ul> Element zusätzlich die Kennzeichnung role=tablist.
Die <li>-Elemente erhalten das Attribut role="presentation".
Das <a>-Element erhält role="tab" und id="tab1". Der Link muss auf das zugehörige Panel verweisen - z.B. aria-controls="panel1"
Inaktive <a> werden mit aria-selected="false" ausgezeichnet.
Aktive <a> mit aria-selected="true".
Inhaltsbereiche von Reitern erhalten role="tabpanel" und aria-labelledby="tab2"
Das aktive Panel wird mit tabindex="0" in die Fokusreihenfolge gebracht.
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
UX-Writing
Was ist zu texten
- Sektions-Benennung
- Sektions-Inhalt
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
- Sektions-Benennung:
- von Tabs und Accordeons muss besonders gut überlegt sein, da es sich bei dahinterliegenden Informationen um relevante Informationen für die entsprechende Botschaft der Seite handelt. (sekundäre Informationen würden mittels Links verknüpft werden) Darum ist es essentiell, dass Nutzer bereits beim Scannen der Seite erkennen und verstehen um welche Inhalte es sich hierbei handelt damit die Zugänglichkeit für wichtige Informationen bestehen bleibt.
- von Tabs besteht zumeist aus ein bis zwei Hauptwörtern, kann, sofern gut überlegt jedoch auch aus einer kurzen Frage bestehen.
- von Akkordeons kann grundsätzlich etwas länger ausfallen. Vielfach eignen sich hier Fragen besonders gut.
- Besonders auf Klarheit und Eindeutigkeit achten! “Gut zu Wissen”, “Mehr Informationen” “Details” ,…. sind keine guten Benennungen
- Sektions-Inhalt:
Einzelne Sektionen dürfen nicht zu viel Inhalt enthalten, da eine geöffnete, zu große Sektion die anderen Sektionen aus dem Sichtfeld schieben und es dem Nutzer so erschwert wird die Übersicht zu behalten. Die weiteren Sektionen werden dann erst wieder durch scrollen sichtbar, eine Aktion welche durch den Einsatz von Accordeons eigentlich vermieden werden sollte.